<template>
  <div class="page-card verify-data">
    <h-query :showKey="[]" :query="query" @search="search">
      <a-button type="primary" class="a-button-right" style="margin: 6px 0 0 0">交接班注意事项</a-button>
    </h-query>
    <h-ccard shadow>
      <a-row :gutter="20">
        <a-col :span="4">
          <div class="verify-list">
            <h1 class="verify-label">事件名称: </h1>
            <div class="verify-list--scroll">
              <div @click="select(item, i)" :class="['verify-each', active == i ? 'active' : '']" v-for="(item, i) in history" :key="i">
                <p>{{ item.title }}</p>
              </div>
            </div>
          </div>
          <div class="verify-list">
            <h1 class="verify-label">下属部门上报: </h1>
            <div class="verify-list--scroll">
              <div :class="['verify-each']" v-for="(item, i) in historyDetp" :key="i">
                <p>{{ item.title }}</p>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="20">
          <div style="position: relative">
            <h1 class="verify-label">每日值班舆情及处置情况一览表</h1>
            <a-button class="verify-btn" type="primary" @click="toURL('/semHistory')">历史记录</a-button>
          </div>
          <h-table
            ref="htable"
            @init="getList"
            :config="config">
            <span slot="link" slot-scope="{text, record}">
              <div>{{ record.title }}</div>
              <a :href="record.link" target="_blank">{{ record.link }}</a>
            </span>
            <span slot="action" slot-scope="{text, record}">
              <a class="red" @click="remove(record)">删 除</a>
            </span>
          </h-table>
          <div class="verify-footer">
            <a-button type="primary">保 存</a-button>
            <a-button type="primary" style="margin-left: 12px">导出并保存</a-button>
          </div>
        </a-col>
      </a-row>
    </h-ccard>
  </div>
</template>

<script>
import { semList } from '@/api/serve';

export default {
  inject: ['toURL'],
  components: {

  },
  data() {
    return {
      dataShow: false,
      dataForm: {
        front: '80',
        back: '10'
      },
      active: 0,
      selectData: {},
      query: [
        {
          key: 'title',
          type: 'input',
          label: '搜索事件'
        },
        {
          key: ['startTime', 'endTime'],
          type: 'dateTime',
          label: '时间'
        }
      ],
      history: [
        {
          title: 'XXX事件名称'
        },
        {
          title: 'XXX事件名称'
        },
        {
          title: 'XXX事件名称'
        },
        {
          title: 'XXX事件名称'
        },
        {
          title: 'XXX事件名称'
        },
        {
          title: 'XXX事件名称'
        },
        {
          title: 'XXX事件名称'
        },
        {
          title: 'XXX事件名称'
        },
        {
          title: 'XXX事件名称'
        },
        {
          title: 'XXX事件名称'
        },
        {
          title: 'XXX事件名称'
        }
        // {
        //   title: 'XXX事件名称',
        //   time: '2022-02-02 20:00',
        //   statusText: '已完成'
        // }
      ],
      historyDetp: [
        {
          title: 'XXX部门'
        },
        {
          title: 'XXX部门'
        },
        {
          title: 'XXX部门'
        },
        {
          title: 'XXX部门'
        },
        {
          title: 'XXX部门'
        },
        {
          title: 'XXX部门'
        },
        {
          title: 'XXX部门'
        },
        {
          title: 'XXX部门'
        },
        {
          title: 'XXX部门'
        },
        {
          title: 'XXX部门'
        },
        {
          title: 'XXX部门'
        }
        // {
        //   title: 'XXX事件名称',
        //   time: '2022-02-02 20:00',
        //   statusText: '已完成'
        // }
      ],
      config: {
        rowKey: 'id',
        // bordered: true,
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            align: 'center',
            title: '日期',
            dataIndex: 'time'
          },
          {
            align: 'center',
            title: '舆情文字+链接',
            dataIndex: 'link',
            width: 500,
            scopedSlots: { customRender: 'link' }
          },
          {
            align: 'center',
            title: '来源',
            dataIndex: 'source'
          },
          {
            align: 'center',
            title: '类别',
            dataIndex: 'type'
          },
          {
            align: 'center',
            title: '属地',
            dataIndex: 'territory'
          },
          {
            align: 'center',
            title: '部门/地区',
            dataIndex: 'address'
          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        pagination: {
          total: 100
        }
      },
      componeyConfig: {
        rowKey: 'id',
        size: 'small',
        dataSource: [],
        columns: [
          // {
          //   align: 'center',
          //   title: '序号',
          //   dataIndex: 'index',
          //   scopedSlots: { customRender: 'index' }
          // },
          {
            align: 'center',
            title: '第三方公司',
            dataIndex: 'title',
            width: 400
          },
          {
            align: 'center',
            title: '主贴',
            dataIndex: 'tie'
          },
          {
            align: 'center',
            title: '评论',
            dataIndex: 'recoment'
          },
          {
            align: 'center',
            title: '参考分值',
            dataIndex: 'acceptNum'
          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        pagination: {
          total: 100
        }
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    search() {
      this.$refs.htable.refresh();
    },
    select(item, i) {
      this.active = i;
      this.selectData = item;
    },
    getList(params) {
      semList().then(res => {
        this.config.dataSource = res.data.list;
      });
    },
    remove(record) {
      this.$message.success('删除成功');
      this.$refs.htable.refresh(true);
    }
  }
};
</script>

<style scoped lang="less">
  .verify-data {
    .verify--btn {
      position: absolute;
      right: 0;
      top: 0;
    }
    .verify-list {
      margin-left: -34px;
      margin-bottom: 16px;
      border-bottom: 1px solid #ddd;
      padding-bottom: 12px;
      .verify-list--scroll {
        height: 260px;
        overflow-y: scroll;
        overflow-x: hidden;
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background: #1F3B8A;
        }
        &::-webkit-scrollbar-track {
          border-radius: 10px;
          background: #EDEDED;
        }
        &::-webkit-scrollbar {
          width: 6px;
          height: 1px;
        }
      }
      &:last-child {
        margin-bottom: 0;
        border: none;
      }

      .verify-label {
        padding-left: 42px;
      }
    }
    .verify-label {
      font-size: 17px;
      font-weight: 600;
      color: #333;
      // padding-left: 42px;
      margin-bottom: 16px;
    }
    .verify-btn {
      position: absolute;
      right: 0;
      top: 0;
    }
    .verify-each {
      padding: 12px 12px;
      padding-left: 42px;
      box-sizing: border-box;
      // border-radius: 4px;
      position: relative;
      width: 94%;
      margin-left: 6%;
      cursor: pointer;
      &:hover {
        background: rgba(31, 59, 138, 0.05);
      }
      &.active {
        background: rgba(31, 59, 138, 0.1);
        &::after {
          // content: ' ';
          // position: absolute;
          // right: 0;
          // // border-radius: 10px;
          // background: #1F3B8A;
          // width: 4px;
          // height: 100%;
          // top: 0;
        }
      }
      p {
        margin: 0;
      }
      >p:first-child {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin-bottom: 2px;
      }
    }
  }
  .selectall {
    position: absolute;
    right: 12px;
    top: 0;
    z-index: 222;
  }
  .verify-footer {
    text-align: right;
    margin-top: -50px;
  }
</style>
